<template>
    <div style="height: 50px;">
        <el-button @click="Export()">导出</el-button>
    </div>

    <!-- 查询条件 -->
    <el-form :inline="true" :model="show" class="demo-form-inline">
        <el-form-item label="客户名称">
            <el-input v-model="show.ClientName" placeholder="客户名称" @dblclick="dialogVisible = true" clearable />
        </el-form-item>
        <el-form-item label="退款日期">
            <el-date-picker v-model="show.PlanRefundStart" type="date" placeholder="退款开始日期" clearable />-
            <el-date-picker v-model="show.PlanRefundEnd" type="date" placeholder="退款结束日期" clearable />-
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="GetActualRefundList">查询</el-button>
        </el-form-item>
    </el-form>

    <!-- 显示列表 -->
    <h1 style="text-align: center;font-weight: bold;margin-top: 30px;margin-bottom: 30px;font-size: 30px;">实退销售额列表</h1>
    <el-table :data="ActualRefundList" style="width: 100%" @selection-change="handleSelectionChange">
        <el-table-column type="selection" width="55" />
        <el-table-column type="index" label="序号" align="center" />
        <el-table-column prop="clientName" label="客户名称" align="center" />
        <el-table-column prop="salesReturnAmout" label="退款金额" align="center">
            <template v-slot="scope">
                {{ scope.row.salesReturnAmout.toFixed(2) }}
            </template>
        </el-table-column>
        <el-table-column prop="planRefundDate" label="退款时间" align="center">
            <template v-slot="scope">
                {{ scope.row.planRefundDate.substring(0, 10) }}
            </template>
        </el-table-column>
        <el-table-column prop="date" label="操作" align="center">
            <template v-slot="scope">
                <el-button size="small" @click="del(scope.row.salesShouldRefundId)">删除</el-button>
                <el-button size="small"
                    @click="FanSalesShouldList(scope.row.salesShouldRefundId); dialogVisible1 = true">修改</el-button>
            </template>
        </el-table-column>
    </el-table>

    <!-- 客户名称弹框 -->
    <el-dialog v-model="dialogVisible" title="客户名称选择" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <el-row>
                <el-col :span="4">
                    <el-tree style="max-width: 600px" :data="Product" :props="defaultProps" default-expand-all="true" />
                </el-col>
                <el-col :span="20">
                    <el-table :data="Show" border style="width: 100%" @selection-change="handleSelectionChange1">
                        <el-table-column type="selection" width="55" />
                        <el-table-column prop="clientName" label="客户名称" align="center" />
                        <el-table-column prop="cName" label="客户行业" align="center" />
                        <el-table-column prop="provinceName" label="客户省份" align="center" />
                        <el-table-column prop="cityName" label="客户市区" align="center" />
                        <el-table-column prop="cPrimaryContact" label="联系人姓名" align="center" />
                    </el-table>
                </el-col>
            </el-row>
            <el-button type="primary" @click="dialogVisible = false">
                保存
            </el-button>
        </template>
    </el-dialog>

    <!-- 修改弹框 -->
    <el-dialog v-model="dialogVisible1" title="" width="1000" style="height: 700px;" :before-close="handleClose">
        <span></span>
        <template #footer>
            <div>
                <el-button @click="updsalesshould()" style="float: left;">保存</el-button>
            </div>
            <h1 style="text-align: center;font-weight: bold;margin-top: 30px;margin-bottom: 30px;font-size: 30px;">
                销售退款</h1>
            <table border="1" style="border-collapse: collapse; width: 100%; height: 40px; text-align: center;">
                <tr>
                    <td>客户名称</td>
                    <td>
                        <input style="width: 100%;height: 40px; text-align: center;" v-model="sales.clientName"
                            :disabled="true" clearable />
                    </td>
                </tr>
                <tr>
                    <td>计划退款总额</td>
                    <td>
                        <input style="width: 100%;height: 40px; text-align: center;" v-model="sales.salesReturnAmout"
                            :disabled="true" clearable />
                    </td>
                </tr>
                <tr>
                    <td>本次退款金额</td>
                    <td>
                        <input style="width: 100%;height: 40px; text-align: center;" v-model="updsales.amountRefund"
                            @change="jisuan()" />
                    </td>
                </tr>
                <tr>
                    <td>退款日期</td>
                    <td>
                        <input style="width: 100%;height: 40px; text-align: center;" type="date"
                            v-model="updsales.planRefundDate" clearable />
                    </td>
                </tr>
                <tr>
                    <td>剩余应退金额</td>
                    <td>
                        <input style="width: 100%;height: 40px; text-align: center;" :disabled="true"
                            v-model="sales.shengmoney" clearable />
                    </td>
                </tr>
            </table>
        </template>
    </el-dialog>
</template>

<script setup lang='ts'>
import axios from 'axios'
import * as XLSX from 'xlsx';
import { ref, reactive, onMounted, computed } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useRouter } from 'vue-router';
const router = useRouter();
import http from '../../../http.js'

const dialogVisible = ref(false)
const dialogVisible1 = ref(false)

//查询条件
const show = reactive({
    Pindex: 1,
    Psize: 10,
    ClientName: "",
    PlanRefundStart: "",
    PlanRefundEnd: "",
    lcount: "",
    pcount: "",
})

//显示实退销售额
const ActualRefundList = ref([])
const GetActualRefundList = () => {
    axios.get(http.zblnb + '/cw/api/ActualRefund/GetSalesReturn', {
        params: {
            Pindex: show.Pindex,
            Psize: show.Psize,
            ClientName: show.ClientName,
            PlanRefundStart: show.PlanRefundStart,
            PlanRefundEnd: show.PlanRefundEnd,
        }
    })
        .then(res => {
            console.log(res.data.data)
            ActualRefundList.value = res.data.data.list;
            show.lcount = res.data.data.lcount;
            show.pcount = res.data.data.pcount;
        })
}


//#region  客户名称

const form = reactive({
    ClientName: '',
    CRecipients: '',
    STime: '',
    ETime: '',
    CPickingStatus: '',
    CApplicant: '',
    CIndustry: '',
    pageIndex: 1,
    pageSize: 5,
    totalCount: 0,
    pageCount: 0,
    SectorId: 0
})

//树形
var Product = ref([]);
const ProductType = () => {
    axios.get(http.zblnb + '/vendor/api/Client/ProductTypeSelect').then(res => {
        Product.value = res.data.data
        console.log(res.data.data)
    })
}
//显示
var Show = ref([]);
const GetShow = () => {
    axios.get(http.zblnb + '/vendor/api/Client/ClientAllShow', {
        params: {
            ClientName: form.ClientName,
            CRecipients: form.CRecipients,
            STime: form.STime,
            ETime: form.ETime,
            CPickingStatus: form.CPickingStatus,
            CApplicant: form.CApplicant,
            CIndustry: form.CIndustry,
            pageIndex: 1,
            pageSize: 5,
        }
    }).then(res => {
        Show.value = res.data.data.list
        console.log(res.data.data)
        form.totalCount = res.data.data.lcount
        form.pageCount = res.data.data.pcount
    })
}

//选择客户名称
const check1 = ref([])
const handleSelectionChange1 = (val: User[]) => {
    check1.value = val
    console.log(check1.value)
    show.ClientName = check1.value[0].clientName
}

const defaultProps = {
    children: 'children',
    label: 'label',
}


//#endregion


//导出
const Export = () => {
    ElMessageBox.confirm('是否确认导出?', '警告', {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: 'warning',
    })
        .then((res) => {
            if (check.value.length <= 0) {
                ElMessage.warning('请选择数据!');
                return;
            }
            //表头
            let tableData = [
                ['序号', '客户名称', '退款金额', '退款时间']
            ]
            check.value.forEach((item, index) => {
                let rowData = []
                //导出内容的字段
                rowData = [
                    index + 1,
                    item.clientName,
                    item.amountRefund,
                    item.planRefundDate,
                ]
                tableData.push(rowData)
            })
            let workSheet = XLSX.utils.aoa_to_sheet(tableData);
            let bookNew = XLSX.utils.book_new();
            XLSX.utils.book_append_sheet(bookNew, workSheet, '实退销售额') // 工作簿名称
            let name = '实退销售额' + '.xlsx'
            XLSX.writeFile(bookNew, name) // 保存的文件名
        })
}


//多选框
const check = ref([])
const handleSelectionChange = (val: User[]) => {
    check.value = val
    console.log(check.value)
}

//删除条件
const DELinfo = ref({
    "salesShouldRefundId": [],
    "delName": "",
    "office_Id": "0",
    "user_Id": 0
})


//删除
const del = (salesShouldRefundId: number) => {
    ElMessageBox.confirm(
        '确认删除吗?',
        '警告',
        {
            confirmButtonText: '是',
            cancelButtonText: '否',
            type: 'error',
        }
    )
        .then(() => {
            DELinfo.value.salesShouldRefundId = [salesShouldRefundId]
            console.log(DELinfo.value)
            axios.post(http.zblnb + '/cw/api/ActualRefund/DelSalesReturn', DELinfo.value)
                .then(res => {
                    if (res.data.data > 0) {
                        ElMessage.success('删除成功');
                        GetActualRefundList();
                    }
                    else {
                        ElMessage.error('删除失败');
                    }
                })
        })
        .catch(() => {

        })
}


//反填的值
const sales = reactive({
    salesShouldRefundId: 0,
    clientName: "",
    salesReturnAmout: 0,
    salesReturnId: '',
    shengmoney: 0
})

//反填
const FanSalesShouldList = (salesShouldRefundId: number) => {
    sales.salesShouldRefundId = salesShouldRefundId;
    axios.get(http.zblnb + '/cw/api/ActualRefund/FanSalesReturn?SalesShouldRefundId=' + salesShouldRefundId)
        .then(res => {
            let d = res.data.data;
            console.log(res.data.data)
            sales.clientName = d.clientName;
            sales.salesReturnAmout = d.salesReturnAmout;
            sales.salesReturnId = d.salesReturnId;
        })
}

//修改的值
const updsales = reactive({
    "salesShouldRefundId": 0,
    "refundPlanCode": "",
    "planRefundDate": "",
    "amountRefund": 0,
    "refundPaceWay": "",
    "salesReturnId": ""
})


//修改
const updsalesshould = () => {
    const model = {
        salesShouldRefundId: sales.salesShouldRefundId,
        refundPlanCode: updsales.refundPlanCode,
        planRefundDate: updsales.planRefundDate,
        amountRefund: updsales.amountRefund,
        refundPaceWay: 1,
        salesReturnId: sales.salesReturnId,
    }
    console.log(model);
    axios.post(http.zblnb + '/cw/api/ActualRefund/UpdSalesReturn', model)
        .then(res => {
            if (res.data.data > 0) {
                ElMessage.success('修改成功');
                dialogVisible1.value = false;
                GetActualRefundList();
            }
            else {
                ElMessage.error('修改失败');
            }
        })
}

//计算
const jisuan = () => {
    sales.shengmoney = Number(sales.salesReturnAmout - updsales.amountRefund)
}


onMounted(() => {
    jisuan();
    ProductType();
    GetShow();
    GetActualRefundList();
})

</script>

<style></style>